<!-- Articles -->
        <div class="container bg-white" style="width: 100%; display:inline-flex; padding-bottom: 60px; padding-top: 0px;">

            <!-- Flex Replacement-->
            <div class="container bg-white" style="width: 1500px; display:flex;">
            
                <!-- Major Section-->
                <div class="container bg-white" style="width: 1200px;">

                    <!-- Article 1 -->
                    <div style="width: 100%; display:flex; justify-content: space-evenly;">
                        
                        <!-- Text -->
                        <div class="container bg-white" style="width: 50%; height: 350px;">
                            
                            <!-- Title -->
                            <p class="clicktitle" style="font-size: 35px;">
                                <a href="../error.html">
                                    First Article
                                </a>
                            </p>

                            <!-- Subheadline -->
                            <p class="subtext">
                                Lorem ipsum dolor sit amet. Ea optio saepe ea corrupti culpa quo porro quia et maiores provident in nemo voluptatum. Hic quidem impedit aut repellendus deserunt et dolorem dolorem!
                                <br><br>
                                Ab voluptas iusto qui possimus debitis qui molestiae optio vel ipsum quidem rem quia reprehenderit cum cumque velit! Ex animi ipsam eos praesentium facere id blanditiis soluta est fugiat iusto et ipsam deleniti ut deleniti beatae et voluptate aspernatur.                        
                            </p>

                        </div>

                        <!-- Image -->
                        <div class="container bg-white center-cropped" style="width: 50%;">

                            <img src="../committees/IPC-NEW.jpg" alt="Image for article" style="width: 100%; height: 350px; object-fit: cover;">                 
                                
                        </div>                   
    
                    </div>
                    <div class="container bg-white subtext" style="width: 50%; margin-left: -15px; text-align: left; margin: auto; margin-left: 50%; font-size: 16px;">
                        Image Caption
                    </div>

                    <!-- Horizontal Line -->
                    <hr class="article">

                    <!-- Article 2 -->
                    <div style="width: 100%; display:flex; justify-content: space-evenly;">
                        
                        <!-- Text -->
                        <div class="container bg-white" style="width: 50%; height: 350px;">
                            
                            <!-- Title -->
                            <p class="clicktitle" style="font-size: 35px;">
                                <a href="../error.html">
                                    Second Article
                                </a>
                            </p>

                            <!-- Subheadline -->
                            <p class="subtext">
                                Lorem ipsum dolor sit amet. Ea optio saepe ea corrupti culpa quo porro quia et maiores provident in nemo voluptatum. Hic quidem impedit aut repellendus deserunt et dolorem dolorem!
                                Ab voluptas iusto qui possimus debitis qui molestiae optio vel ipsum quidem rem quia reprehenderit cum cumque velit!          
                            </p>

                        </div>

                        <!-- Image -->
                        <div class="container bg-white center-cropped" style="width: 50%;">
                            
                            <img src="../ipc.jpg" alt="Image for article" style="width: 100%; height: 350px; object-fit: cover;">
                            
                        </div>                   
    
                    </div>
                    <div class="container bg-white subtext" style="width: 50%; margin-left: -15px; text-align: left; margin: auto; margin-left: 50%; font-size: 16px;">
                        Image Caption
                    </div>

                    <!-- Horizontal Line -->
                    <hr class="article">     
                    
                    <!-- Article 3 -->
                    <div style="width: 100%; display:flex; justify-content: space-evenly;">
                        
                        <!-- Text -->
                        <div class="container bg-white" style="width: 50%; height: 350px;">
                            
                            <!-- Title -->
                            <p class="clicktitle" style="font-size: 35px;">
                                <a href="../error.html">
                                    Third Article
                                </a>
                            </p>

                            <!-- Subheadline -->
                            <p class="subtext">
                                Lorem ipsum dolor sit amet. Ea optio saepe ea corrupti culpa quo porro quia et maiores provident in nemo voluptatum. Hic quidem impedit aut repellendus deserunt et dolorem dolorem!
                                <br>
                                Ab voluptas iusto qui possimus debitis qui molestiae optio vel ipsum quidem rem quia reprehenderit cum cumque velit!          
                            </p>

                        </div>

                        <!-- Image -->
                        <div class="container bg-white center-cropped" style="width: 50%;">
                            
                            <img src="../who.jpg" alt="Image for article" style="width: 100%; height: 350px; object-fit: cover;">
                            
                        </div>    
                            
                    
                    
    
                </div> 
                <div class="container bg-white subtext" style="width: 50%; margin-left: -15px; text-align: left; margin: auto; margin-left: 50%; font-size: 16px;">
                    Image Caption
                </div>         

            </div>

            <!-- Vertical Line Divider-->
            <div class="vl"></div>

            <!-- Minor Section -->
            <div class="container bg-white" style="width: 300px; padding-left: 30px;">

                <!-- Article 1 -->
                <div>
                    
                    <!-- Image -->
                    <img src="../dc1.jpg" alt="Image for article" style="width: 100%; height: 175px; object-fit: cover;">

                    <!-- Title -->
                    <p class="clicktitle" style="font-size: 22px; line-height: 25px; margin-top: 10px; margin-bottom: -0px;">
                        <a href="../error.html">
                            First Article
                        </a>
                    </p>

                    <!-- Authors -->
                    <p class="author">
                        By Author 1
                    </p>

                </div>

                <!-- Horizontal Line -->
                <hr class="article">      
                
                <!-- Article 2 -->
                <div>
                    
                    <!-- Image -->
                    <img src="../douglascollege2.png" alt="Image for article" style="width: 100%; height: 175px; object-fit: cover;">

                    <!-- Title -->
                    <p class="clicktitle" style="font-size: 22px; line-height: 25px; margin-top: 10px; margin-bottom: -0px;">
                        <a href="../error.html">
                            Second Article
                        </a>
                    </p>

                    <!-- Authors -->
                    <p class="author">
                        By Author 2
                    </p>

                </div>

                <!-- Horizontal Line -->
                <hr class="article">      
                
                <!-- Article 3 -->
                <div>
                    
                    <!-- Image -->
                    <img src="../unsc.jpg" alt="Image for article" style="width: 100%; height: 175px; object-fit: cover;">

                    <!-- Title -->
                    <p class="clicktitle" style="font-size: 22px; line-height: 25px; margin-top: 10px; margin-bottom: -0px;">
                        <a href="../error.html">
                            Third Article
                        </a>
                    </p>

                    <!-- Authors -->
                    <p class="author">
                        By Author 3
                    </p>

                </div>

                <!-- Horizontal Line -->
                <hr class="article">      
                
                <!-- Article 4 -->
                <div>
                    
                    <!-- Image -->
                    <img src="../douglascollege3.jpg" alt="Image for article" style="width: 100%; height: 175px; object-fit: cover;">

                    <!-- Title -->
                    <p class="clicktitle" style="font-size: 22px; line-height: 25px; margin-top: 10px; margin-bottom: -0px;">
                        <a href="../error.html">
                            Fourth Article
                        </a>
                    </p>

                    <!-- Authors -->
                    <p class="author">
                        By Author 4
                    </p>

                </div>

            </div>

            </div>

        </div>